<script setup lang="ts">
  import { Popover } from '@arco-design/web-vue';
  import { EmojiPicker } from 'vue3-twemoji-picker-final';
  import emojiIcon from '/@/assets/pins/c_emoji.svg';

  const emit = defineEmits(['select']);

  const onSelect = (data: { i: string }) => {
    emit('select', data.i);
  };
</script>

<template>
  <Popover title="表情" trigger="click" position="bl" class="select-none">
    <div class="text-[rgba(0,0,0,0.5)] cursor-pointer select-none">
      <slot>
        <div class="flex items-center justify-center">
          <img :src="emojiIcon" class="w-[20px] h-[20px] mr-[8px]" />
          <div>表情</div>
        </div>
      </slot>
    </div>
    <template #content>
      <div class="h-[260px]">
        <EmojiPicker
          :options="{
            imgSrc: '/img/',
            native: true,
            locals: 'zh_CN',
            hasGroupIcons: true,
            hasSearch: false,
            hasGroupNames: false,
            stickyGroupNames: false,
            hasSkinTones: false,
            recentRecords: false,
          }"
          @select="onSelect"
        />
      </div>
    </template>
  </Popover>
</template>
